<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1>{{schollName}}</h1>
        学校名：<input type="text" v-model="schollName">
        <hr>
        姓：<input type="text" v-model="firstName"> <br /><br />
        <!-- 双向数据绑定,修改data中数据会使得页面重新渲染 -->
        名：<input type="text" v-model="lastName"> <br /><br />
        全名：<span>{{getTheFullname()}}</span>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#demo',
            data: {
                firstName: 'zhang',
                lastName: 'san',
                schollName: '尚硅谷'
            },
            methods: {
                getTheFullname() {
                    console.log('getTheFullname')
                    //解构赋值，从vm上获取firstName、lastName
                    const { firstName, lastName } = this //此处的this是vm
                    return firstName[0].toUpperCase() + firstName.slice(1) + '-' + lastName
                }
            }
        })
    </script>
</body>

</html>